<template>
    <!--要显示主体内容-->
    <div class="main">
        <div class="login">
            <div class="logo">
                <img src="../assets/my_logo.png" alt="">
            </div>
            <el-form :model="user" class="user_form" :rules="userRules" ref="userFormRef">

                <el-form-item prop="emeail">
                    <el-input v-model="user.emeail" placeholder="邮箱" :prefix-icon="User" />
                </el-form-item>
                <el-form-item prop="pwd">
                    <el-input v-model="user.pwd" placeholder="新密码" :prefix-icon="Lock" show-password />
                </el-form-item>
                <el-form-item prop="agiance_pwd">
                    <el-input v-model="user.agiance_pwd" placeholder="再次输入密码" :prefix-icon="Lock" show-password />
                </el-form-item>
                <el-form-item prop="code">
                    <el-input v-model="user.code" placeholder="邮箱验证码" style="width: 150px;" />
                    <el-button type="primary" style="margin-left: 20px;"
                        @click="sendEmail(userFormRef)">获取验证码</el-button>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click="reset_pwd(userFormRef)">提交</el-button>
                    <el-button type="primary" @click="GoLogin()">返回登录</el-button>
                    <el-button type="primary" @click="Goregistration(userFormRef)">没有账号?去注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>


<script setup>
import { reactive, ref } from 'vue'
import { Lock, User } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted } from 'vue';
// import api from '@/api/index.js'    // 导入api接口
import api from '@/api/index.js'
import "element-plus/theme-chalk/el-message-box.css";



onMounted(() => {
    
})

// 定义表单数据
const user = reactive({
    emeail: '',
    pwd: '',
    agiance_pwd: '',
    code: '',
    token: ''
})



// 定义表单规则
const userRules = reactive({
    emeail: [
        { required: true, message: '邮箱不能为空', trigger: 'blur' },
        { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱地址', trigger: "blur" }
    ],
    pwd: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
    ],
    agiance_pwd: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        // 验证两次密码是否一致
        { validator: (rule, value) => {
            if (value !== '') {
                return user.pwd === value
            } else {
                return true
            }}, message: '两次密码不一致', trigger: "blur" },
    ],
    code: [
        { required: true, message: '验证码不能为空', trigger: 'blur' },
        { min: 5, max: 5, message: '长度为5', trigger: 'blur' }
    ]
})


const userFormRef = ref(null) // 定义表单ref

const router = useRouter() // 创建路由实例

// 定义跳转登录页面功能
const GoLogin = () => {
    router.push('/login')
}
// 定义重置密码功能
const reset_pwd = (formRef) => {
    formRef.validate((valid) => {
        if (valid) {
            if (user.code.length != 0) {
                console.log("发送请求")
                api.reset_pwd(user).then((res) => {
                    console.log("请求已经发送")
                if (res.status == 200) {
                    console.log("状态码200")
                    console.log(res)
                    if (res.data.data == true) {
                        ElMessageBox.alert(
                            '密码已重置，去登陆',
                            '提示',
                            {
                                confirmButtonText: '确定',
                                type: 'success',
                                showClose: false,
                                closeOnClickModal: false,
                                closeOnPressEscape: false,
                            }
                        ).then(() => {
                            router.push('/login')
                        })
                    }
                    else {
                        ElMessage({
                            message: res.data.msg,
                            type: 'error'
                        })
                    }
                }
            })
            }
            else{
                ElMessage({
                            message: "请输入邮箱验证码",
                            type: 'error'
                        })
            }
        } else {
            return false
        }
    })
}

const Goregistration = ()=>{
    router.push('/registration')
}

// 定义获取邮箱验证码发送api
const sendEmail = (formRef) => {
    formRef.validateField('emeail',(valid) => {
        if (valid) {
            api.reset_pwd_get(user.emeail).then((res) => {
                console.log(res)
                if (res.data.data == false) {
                    ElMessage({
                            message: res.data.msg,
                            type: 'error'
                 })
                 } else {
                    user.token = res.data.token
                    ElMessage({
                            message: res.data.msg,
                            type: 'success'
                        })
                    }
            })
        }
    })
}


</script>


<style scoped>
.main {
    width: 100%;
    height: 100%;
    background-color: rgb(233, 188, 8);
    display: flex;
    justify-content: center;
    align-items: center;
}


.login {
    width: 700px;
    height: 700px;
    background-color: white;
    border-radius: 5px;
}


.logo {
    width: 200px;
    border: 1px solid #eee;
    margin: 0 auto;
    margin-top: -85px;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 0 10px #ddd;
}


img {
    width: 100%;
    height: 100%;
}


.user_form {
    padding: 50px;
}


.btns {
    display: flex;
    justify-content: space-between;
}


.btns button {
    flex: 1;
}
</style>